<template>
  <!--banner轮播-->
  <div class="swiper-container" id="mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in bannerList" :key="item.id">
        <img :src="item.image_src" />
      </div>
    </div>
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script setup>
import { watch, computed, onMounted, nextTick } from "vue";
import { useStore } from "vuex";
import Swiper from "swiper";

const $store = useStore();
const $state = $store.state;

console.log($state.Home.bannerList);
const bannerList = computed(() => {
  return $state.Home.bannerList;
});
//监听bannerList列表变化
watch(bannerList, () => {
  nextTick(() => {
    //swiper轮播图
    new Swiper(document.getElementById("mySwiper"), {
      autoplay: true, //开启自动轮播
      loop: true, // 开启循环模式选项
      pagination: {
        el: ".swiper-pagination", // 分页器
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next", // 前进后退按钮
        prevEl: ".swiper-button-prev",
      },
    });
  });
});

onMounted(() => {
  $store.dispatch("getBannerList");
});
</script>

<style scoped lang="less"></style>
